<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <meta charset="UTF-8">
   <title>{% block title %}PickMeUp{% endblock %}</title>
   {% load staticfiles %}
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   <link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet" type="text/css">
   <link rel="stylesheet" type="text/css" href="{% static 'music/style.css' %}"/>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<body >
   <nav class="navbar navbar-inverse" role="navigation" >
   <div class="container-fluid">

       <!-- Logo -->
       {% if request.user.is_authenticated %}
       <div class="navbar-header" >
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topNavBar">
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
               </button>

                   <a class = "navbar-brand " href="{% url 'music:index' %}"> <<< pick me </a>
                   </div>
               {% else %}

                      <div class="navbar-left">

                   <a href = "{% url 'music:login' %}">

{#                        <form class="navbar-right" method="POST" action="">{% csrf_token %}#}
{#                            <div class = ''>#}
{#                                <input type="text" class="form-control" name="username" placeholder="Username">#}
{#                            </div>#}
{#                            <div class = ''>#}
{#                                <input type="text" class="form-control" name="password" placeholder="Password">#}
{#                            </div>#}
                           <span class = "glyphicon glyphicon-log-in" aria-hidden="ture"></span>&nbsp;  Login&nbsp;
{#                        </form>#}
                   </a>





                   <a href = "{% url 'music:register' %}">
                       <span class = "glyphicon glyphicon-user" aria-hidden="ture"></span>register
                   </a>

                   </div>

               <li class = "">
                   <div class="navbar-right" >

                   <a class = "navbar-brand " >Welcome to PickMeUp</a>
                   </div>
                </li>



           {% endif %}



       {% if request.user.is_authenticated %}

       <!--items -->
       <div class = "collapse navbar-collapse" id="topNavBar">

           <ul class = "nav navbar-nav">
               <li class = "">
                   <a href = "{% url 'music:mine' %}">
                       <span class = "glyphicon glyphicon-map-marker" aria-hidden="ture"></span>&nbsp; My Locations
                   </a>
               </li>


       <!--search test-->
           <form class="navbar-form navbar-left" role="search" method="get" action="{% url 'music:result' %}">
               <div class="form=group">
                   <input type="text" class="form-control" name="q" placeholder="Search" value="{{ request.GET.q }}"/>
                   <button type="submit"  class="btn btn-default glyphicon glyphicon-search"/>
               </div>
           </form>






           <ul class = "nav navbar-nav navbar-rignt">

                       <li class = "">
                           <a href = "{% url 'music:album-add' %}">
                               <span class = "glyphicon glyphicon-plus" aria-hidden="ture"></span>&nbsp; Add Path
                           </a>
                       </li>

{#                    <li class="active"><a href="{% url 'music:detail' album.id %}">View All</a></li>#}


{#                        {% if request.user.id == album.driver.id %}#}

                       <li>
                           <a href="{% url 'music:station-add' %}">
                               <span class = "glyphicon glyphicon-plus" aria-hidden="ture"></span>&nbsp; Add Station
                           </a>
                       </li>




                        <li class = "pull-right">
                           <a href = "{% url 'music:logout' %}">
                               <span class = "glyphicon glyphicon-user" aria-hidden="ture"></span>  Hi, {{ request.user.username }} {{ album1 }} &nbsp;&nbsp;&nbsp;&nbsp;
                               <span class = "glyphicon glyphicon-log-out" aria-hidden="ture"></span>&nbsp; Logout
                           </a>
                       </li>

                       {% endif %}


           </ul>
           </ul>
       </div>
   </div>
</nav>
{% block body %}
{% endblock %}
</body>
</html>


